<template>
  <el-dialog
    :model-value="dialogVisible"
    :destroy-on-close="true"
    :title="dialogTitle"
    width="600px"
    @close="emits('closeDialog')"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :label-width="formLabelWidth"
      :rules="rules"
    >
      <el-form-item
        label="商户"
        :label-width="formLabelWidth"
        prop="merchant_id"
      >
        <el-select
          v-model="dialogForm.merchant_id"
          placeholder="选择商户"
          style="width: 100%"
          :disabled="dialogForm.id ? true : false"
        >
          <el-option
            v-for="item in merchantList"
            :key="item.value"
            :label="`${item.name}（商户ID：${item.merchant_id}）`"
            :value="item.merchant_id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="商户ID" prop="merchant_id">
        <el-input
          v-model="dialogForm.merchant_id"
          :disabled="dialogForm.id ? true : false"
        />
      </el-form-item> -->
      <el-form-item label="基准币种" prop="base_currency">
        <el-input v-model="dialogForm.base_currency" />
      </el-form-item>
      <el-form-item label="目标币种" prop="quote_currency">
        <el-input v-model="dialogForm.quote_currency" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="dialogForm.price" type="number">
          <template #prepend v-if="dialogForm.base_currency"
            >1 {{ dialogForm.base_currency }}</template
          >
          <template #append v-if="dialogForm.quote_currency">{{
            dialogForm.quote_currency
          }}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="过期时间" :label-width="formLabelWidth">
        <el-date-picker
          clearable
          v-model="dialogForm.expire_time"
          type="datetime"
          placeholder="价格过期时间"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { timestamp } from "@/utils/utils";
const dialogFormRef = ref(null);

defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      id: "",
      base_currency: "",
      quote_currency: "",
      price: "",
      initial_price: "",
      expire_time: "",
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  dialogTitle: {
    type: String,
    default: "",
  },
  merchantList: { type: Array, default: [] },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

// 校验
const rules = {
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
};

const formLabelWidth = "120px";
// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign(
          {},
          {
            id: dialogForm.id,
            base_currency: dialogForm.base_currency,
            merchant_id: dialogForm.merchant_id,
            quote_currency: dialogForm.quote_currency,
            price: dialogForm.price,
            initial_price: dialogForm.price,
            expire_time: timestamp(dialogForm.expire_time.valueOf()),
          }
        );
        if (!param.id) {
          delete param.id;
        }
        emits("submitForm", param);
      } catch (error) {
        return false;
      }
    })
    .catch((error) => {
      return false;
    });
};
</script>
